<template>
  <div class='container'>
    <el-card>
      <!-- 顶部 -->
      <el-row type="flex" style="height:50px" align="end" justify="space-between" >
          <el-form inline>
            <el-form-item label="关键字">
              <el-input v-model="formDate.keyword"></el-input>
            </el-form-item>

            <el-form-item label="状态" style="margin-left:50px">
              <el-select v-model="formDate.state" placeholder="请选择">
                <el-option v-for="state in status" :key="state.value" :value="state.value + ''" :label="state.label"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button size="small" @click="eliminateA">清除</el-button>
              <el-button size="small" type="primary" @click="searchA">搜索</el-button>
            </el-form-item>
          </el-form>
          <div>
              <el-button type="success" icon="el-icon-edit" size="small" style="margin-top:3px" @click="addA">新增技巧</el-button>
          </div>
      </el-row>
      <el-alert type="info" :title="`数据一共${counts}条`" show-icon style="margin-bottom:15px"></el-alert>

      <!-- 表格内容 -->
      <el-table :data="tableDate">
        <el-table-column pro label="序号" width="80px" type="index">
          <template v-slot="{$index}">
            {{($index + 1) + (p.page - 1) * p.pagesize }}
          </template>
        </el-table-column>
        <el-table-column pro label="文章标题" width="400px">
          <template v-slot="{ row }">
            {{row.title}}
            <i v-if="row.videoURL" @click="videoPreview(row.videoURL)" class="el-icon-film" style="color:#00f"></i>
          </template>
        </el-table-column>
        <el-table-column pro label="阅读数" prop="visits"></el-table-column>
        <el-table-column pro label="录入人" prop="username"></el-table-column>
        <el-table-column pro label="录入时间">
          <template v-slot="{row}">
            {{formatDate(row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column pro label="状态" width="100px">
          <template v-slot="{row}">
            {{stateObj[row.state]}}
          </template>
        </el-table-column>
        <el-table-column pro label="操作" width="180px">
          <template v-slot="{row}">
            <el-row type="flex" justify="space-around" >
              <el-link type="primary" @click="previewA(row)">预览</el-link>
              <el-link type="primary" v-if="row.state" @click="updateState(row.id,row.state)">启用</el-link>
              <el-link type="primary" v-else @click="updateState(row.id,row.state)">禁用</el-link>
              <el-link type="primary" :disabled="!row.state" :class="{disabled_link : !row.state}" @click="editA(row)">编辑</el-link>
              <el-link type="primary" :disabled="!row.state" :class="{disabled_link : !row.state}" @click="deleteA(row.id)">删除</el-link>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
        <el-row v-show="!isSearch" type="flex" justify="end" style="margin-top:20px" >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="p.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="p.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
          </el-pagination>
        </el-row>

    </el-card>

    <!-- 新增弹窗 add or edit -->
    <el-dialog
      width="50%"
      :title="isEdit ? '编辑技巧' : '新增技巧' "
      :visible.sync="dialogVisibleForAdd"
      @close="closeDialogForAdd">
      <!-- 子组件 -->
      <ArticlesAdd
        v-if="dialogVisibleForAdd"
        @successSubmit="successSubmit"
        :curArtInfo="curArtInfo"
        :isEdit="isEdit"
        @clickCancel="clickCancel"
      ></ArticlesAdd>
    </el-dialog>

    <!-- 预览弹窗 -->
    <el-dialog
      width="50%"
      title="预览文章"
      :visible.sync="dialogVisibleForPreview"
    >
      <ArticlesPreview
        :curArtInfo="curArtInfo"
      ></ArticlesPreview>
    </el-dialog>

    <!-- 预览视频的弹弹窗 -->
    <el-dialog class="xy_dialog"
      :visible.sync="dialogVisibleForVideo"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="diyDialog"
    >
      <template title>
        <el-button class="button_dia" @click="dialogVisibleForVideo = false">X</el-button>
      </template>
      <template>
        <video controls class="video_xy" width="300px" autoplay muted crossorigin>
          <source :src="videoUrlXy">
        </video>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// ! 引入 添加组件
import ArticlesAdd from '@/module-hmmm/components/articles-add'
import ArticlesPreview from '@/module-hmmm/components/articles-preview'
// ! 引入格式数据
import { status } from '@/api/hmmm/constants.js'

//! 引入 api接口
import { list, remove, changeState } from '@/api/hmmm/articles.js'

//! 引入工具类 格式化事件
import { parseTime } from '@/utils'

// ! 计算格式对象
const stateObj = status.reduce((pVal, nVal) => {
  pVal[nVal['value']] = nVal['label']
  return pVal
}, {})
// console.log(1)
// console.log(stateObj) // {0: '禁用', 1: '启用'}
export default {
  components: {
    ArticlesAdd,
    ArticlesPreview
  },
  data () {
    return {
      isSearch: false,
      status: status, // 状态数据
      formDate: {
        state: '', // 文章状态
        keyword: '' // 关键字
      },
      p: { // 页码数量
        page: 1, // 当前页
        pagesize: 5 //
      },
      counts: 0, // 总数量
      tableDate: [], // 表格数据
      stateObj: stateObj, // 禁用格式对象
      dialogVisibleForAdd: false, // 添加弹窗控制器
      isEdit: false, // 是否为编辑状态
      curArtInfo: {}, // 当前被点击编辑的文章信息
      dialogVisibleForPreview: false, // 预览弹窗控制器
      dialogVisibleForVideo: false, // 预览视频弹窗
      videoUrlXy: ''// 当前被点击的 视频连接
    }
  },
  created () {
    this.getArticlesList()
  },
  methods: {
    //! 获取列表数据  默认参数是 data 页码对象 数据
    async getArticlesList (p = this.p, formDate = {}) {
      const res = await list({ ...formDate, ...p })
      console.log(res)
      // 拿到表格数据 和 总数
      this.tableDate = res.data.items
      this.counts = res.data.counts
    },
    // ! 点击搜索 发送请求
    searchA () {
      // 必须输入框有值才算 搜索
      if (this.formDate.state !== '' || this.formDate.keyword !== '') {
        this.getArticlesList(this.p, this.formDate)
        // 隐藏 分页框
        this.isSearch = true
      } else {
        this.getArticlesList(this.p)
      }
    },
    // ! 点击清除按钮
    eliminateA () {
      this.isSearch = false
      this.formDate = {
        state: '', // 文章状态
        keyword: '' // 关键字
      }
      this.getArticlesList(this.p)
    },
    // ! 预览 视频
    videoPreview (videoUrlXy) {
      // 打开弹窗
      this.dialogVisibleForVideo = true
      this.videoUrlXy = videoUrlXy
    },
    // ! 预览文章功能
    previewA (row) {
      console.log(row)
      this.dialogVisibleForPreview = true
      this.curArtInfo = { ...row }
    },
    // !修改状态
    async updateState (id, state) {
      // console.log('输出 (→_→) updateState (→_→) id', id)
      // console.log('输出 (→_→) updateState (→_→) state', state)
      // 发送请求 修改状态 ? 先转换 0--- false 取反 true --- 1
      await changeState({ id, state: +(!state) })
      // console.log(res)
      // 更新
      this.getArticlesList()
    },
    // 增删改操作
    // ! 点击删除按钮
    deleteA (id) {
      this.$confirm('此操作将永久删除该面试技巧, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove({ id })
        console.log('输出 (→_→) deleteA (→_→) res', res)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 刷新列表
        if (this.counts % this.p.pagesize === 1) {
          this.p.page >= 1 ? (this.p.page -= 1) : (this.p.page = 1);
        }
        this.getArticlesList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // ! 点击新增按钮
    addA () {
      this.isEdit = false // 编辑状态 弹窗打开
      this.dialogVisibleForAdd = true
    },
    // ! 点击编辑按钮
    editA (row) {
      // console.log(row)
      this.isEdit = true // 编辑状态 弹窗打开
      this.dialogVisibleForAdd = true
      // 需要回填的值
      this.curArtInfo = row
    },

    //* 表单提交
    successSubmit () {
      this.dialogVisibleForAdd = false
      this.getArticlesList()
    },
    //* 当添加/编辑弹窗关闭时的回调
    closeDialogForAdd () {
      if (this.isEdit) {
        // 编辑状态下表单提交清空数据对象
        this.curArtInfo = {}
      }
    },
    //* 点击取消按钮 关闭弹窗
    clickCancel () {
      this.dialogVisibleForAdd = false
    },
    // 分页操作方法
    //* 页码发生改变时 的回调handleCurrentChange
    handleCurrentChange (val) {
      // console.log('输出 (→_→) handleCurrentChange (→_→) val', val)
      this.p.page = val
      // 刷新列表
      this.getArticlesList()
    },
    //* 每页显示数量发生改变时 的回调handleCurrentChange
    handleSizeChange (val) {
      // console.log('输出 (→_→) handleSizeChange (→_→) val', val)
      // 修改当前数量 发生请求
      this.p.page = 1 // ? 修改每页数量 回到第一页 避免数据错误!
      this.p.pagesize = val
      // 刷新列表
      this.getArticlesList()
    },
    //* 格式化时间 渲染页面
    formatDate (value) {
      return parseTime(value)
    }
  }
}
</script>

<style  lang='scss'>
  .xy_dialog {
    // 清除头部样式
    .el-dialog__header{
      padding: 0;
    }
    // 清除内容
    .el-dialog__body{
      padding: 0;
    }
    // 自定义按钮
    .button_dia{
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      margin: auto;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      background: transparent;
      color: aliceblue;
      opacity: 1;
    }
    .video_xy{
      position: absolute;
      top: 70px;
      left: 0;
      right: 0;
      margin: auto;
      // background-color: red;
    }
  }
</style>